<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>添加预约设置</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
	<!--form表单-->
	<form class="layui-form layui-form-pane ok-form">
		<div class="layui-form-item">
			<div class="layui-col-md6">
				<label class="layui-form-label-big">规则名称</label>
				<div class="layui-input-block-big">
					<input type="text" name="name" placeholder="规则名称" autocomplete="off" class="layui-input" lay-verify="required">
				</div>
			</div>
			<div class="layui-col-md6">
				<label class="layui-form-label-big">开馆日期</label>
				<div class="layui-input-block-big">
					<input type="text" class="layui-input start_date" placeholder="开始日期" name="date" autocomplete="off" lay-verify="required">
				</div>
			</div>
		</div>
        <div class="layui-form-item">
			<div class="layui-col-md6">
				<label class="layui-form-label-big">上午开馆时间</label>
				<div class="layui-input-block-big">
					<input type="text" class="layui-input time" placeholder="上午开馆时间" autocomplete="off" name="am_start_time" lay-verify="required">
				</div>
			</div>
			<div class="layui-col-md6">
				<label class="layui-form-label-big">上午闭馆时间</label>
				<div class="layui-input-block-big">
					<input type="text" class="layui-input time" placeholder="上午闭馆时间" autocomplete="off" name="am_end_time">
				</div>
			</div>
		</div>
        <div class="layui-form-item">
			<div class="layui-col-md6">
				<label class="layui-form-label-big">下午开馆时间</label>
				<div class="layui-input-block-big">
					<input type="text" class="layui-input time" placeholder="下午开馆时间" autocomplete="off" name="pm_start_time">
				</div>
			</div>
			<div class="layui-col-md6">
				<label class="layui-form-label-big">下午闭馆时间</label>
				<div class="layui-input-block-big">
					<input type="text" class="layui-input time" placeholder="下午闭馆时间" autocomplete="off" name="pm_end_time">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-col-md6">
				<label class="layui-form-label-big">提前预约天数</label>
				<div class="layui-input-block-big">
					<input type="text" name="max_lead" placeholder="最多可提前多少天预约，只能填写数字" autocomplete="off" class="layui-input" lay-verify="required|number">
				</div>
			</div>
			<div class="layui-col-md6">
				<label class="layui-form-label-big">时间段长度</label>
				<div class="layui-input-block-big">
					<input type="text" name="slot_length" placeholder="时间段长度，以分钟为单位，只填写数字" autocomplete="off" class="layui-input" lay-verify="required|number">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-col-md6">
				<label class="layui-form-label-big">最大预约人数</label>
				<div class="layui-input-block-big">
					<input type="text" name="max_capacity" placeholder="每个时间段最大预约人数，只能填写数字" autocomplete="off" class="layui-input" lay-verify="required|number">
				</div>
			</div>
		</div>
        <div class="layui-form-item">
			<label class="layui-form-label-big">开馆日</label>
			<div class="layui-input-block-big">
				<input type="checkbox" name="weekdays[]" value="1" title="周一" checked>
                <input type="checkbox" name="weekdays[]" value="2" title="周二" checked>
                <input type="checkbox" name="weekdays[]" value="3" title="周三" checked>
                <input type="checkbox" name="weekdays[]" value="4" title="周四" checked>
                <input type="checkbox" name="weekdays[]" value="5" title="周五" checked>
                <input type="checkbox" name="weekdays[]" value="6" title="周六" checked>
                <input type="checkbox" name="weekdays[]" value="7" title="周日" checked>
			</div>
		</div>
        <div class="layui-form-item">
			<label class="layui-form-label-big">是否生效</label>
			<div class="layui-input-block-big">
				<input type="radio" name="status" value="1" title="是" checked>
                <input type="radio" name="status" value="0" title="否">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block-big">
				<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	<div class="layui-elem-quote" style="font-size: 18px;color: red;margin: 10px 0 0 0;padding: 10px;">
        <p>备注：1.如果中午不休息，则不需要填写“上午闭馆时间”和“下午开馆时间”，比如直接从上午9点开馆到下午18点闭馆。</p>
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			2.假设开馆时间为上午9点，闭馆时间为下午6点，时间段长度为60分钟，则9点--10点，10点--11点，11点--12点，以此类推分别为一个时间段。
		</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			3.如果每周有一天需要闭馆休息，则直接在“开馆日”中取消该天的复选框即可。
		</p>
    </div>
</div>
<!--js逻辑-->
<script src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
	layui.use(["form", "okLayer", "okUtils", "okMock", "laydate"], function () {
		let form = layui.form;
		let okMock = layui.okMock;
        let laydate = layui.laydate;
		let okLayer = layui.okLayer;
		let okUtils = layui.okUtils;

		//关闭loading
		okLoading.close();

        //初始化日期选择器
        laydate.render({elem: ".start_date", type: "date", range: '~'});
        //遍历初始化时间选择器
        lay('.time').each(function () {
            laydate.render({elem: this, type: "time", format: 'H:mm'});
        });

		//表单提交
		form.on("submit(add)", function (data) {
			//发送ajax提交表单数据
			okUtils.ajax(okMock.api.reservation_set.insert, "post", data.field).done(function (response) {
				if (response.code == HTTP_OK) {
                    okLayer.greenTickMsg(response.message, function () {
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                } else {
                    layer.msg(response.message, { icon: 2, time: 2000 });
                }
			}).fail(function (error) {});
			return false;
		});
		
	})
</script>
</body>
</html>
